<template>
  <div class="app-wrap">
    <el-container>
      <el-aside width="220px">
        <el-header>
          <div class="logo" @click.stop="linkTo('/home')">
            <img src="~src/assets/logo.png" alt="" />
            <h3>AKSU权限平台</h3>
          </div>
        </el-header>
        <sidebar></sidebar>
      </el-aside>

      <el-main>
      <header-user></header-user>
      <App-Main></App-Main>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import HeaderUser from "src/components/header-user/header-user.vue";
import Sidebar from "src/components/side-bar/index.vue";
import AppMain from "src/components/app-main/index.vue";
export default {
  components: { Sidebar,HeaderUser, AppMain },
  mounted() {},
  methods: {
    linkTo(path) {
      this.$router.push({
        path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  // margin-left: 20px;
  cursor: pointer;
  img {
    margin-right: 8px;
    width: 50px;
  }
  h3 {
    font-size: 16px;
  }
}

.el-aside{
  height: 100vh;
  overflow-y: auto;
  border-right: solid 1px var(--el-menu-border-color);
}

.el-main{
  height: 100vh;
  overflow-y: auto;
}
.el-menu {
  height: calc(100vh - 80px);
  border-right:unset
}
.main {
  padding: 15px;
}
</style>
